<template>
  <div>
    <el-button type="primary" @click="AddStore" icon="el-icon-circle-plus-outline" v-if="isPermissionsBtn('StoreSetting_add')">新增门店</el-button>
    <div class="table-body">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="index" width="80" label="序号"></el-table-column>
        <el-table-column prop="storeName" width="180" label="门店名称"></el-table-column>
        <el-table-column prop="address" label="门店地址"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column fixed="right" width="180" label="操作">
          <template slot-scope="scope">
            <el-button @click="update(scope.row)" type="primary" size="mini" v-if="isPermissionsBtn('StoreSetting_update')">修改</el-button>
            <el-popconfirm title="确定删除此门店？" @onConfirm="handleConfirmDelete(scope.row)">
              <el-button style="margin-left:15px" size="mini" type="danger" slot="reference" v-if="isPermissionsBtn('StoreSetting_del')">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="currentPageChange"
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="新增门店" :visible.sync="isAddStore" width="40%">
      <AddStore @submit="submitevent1" v-if="isAddStore"/>
    </el-dialog>
    <el-dialog title="修改门店" :visible.sync="isupdateStore" width="40%">
      <updateStore
        @submit="updateEvent1"
        :data="storeRow"
        @cancel="isupdateStore = $event"
        v-if="isupdateStore"
      />
    </el-dialog>
  </div>
</template>
<script>
import AddStore from "./AddStore";
import updateStore from "./updateStore";
import { mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {
      isAddStore: false,
      tableData: [],
      isupdateStore: false,
      storeRow: {},
      param:{
        queryRequest: {
          pageNum: 1,
          pageSize: 10
        }
      },
      total:1
    };
  },
  components: {
    AddStore,
    updateStore
  },
  computed: {
    ...mapGetters(["isPermissionsBtn"])
  },
  beforeMount() {},
  mounted() {
    this.getStore();
  },
  methods: {
    currentPageChange(e){
      this.param.queryRequest.pageNum = e;
      this.getStore();
    },
    getStore() {
      this.$service.getStoreList(this.param).then(res => {
        if(res.code =="00000")
        this.tableData = res.data.rows;
        this.total =res.data.total;
      });
    },
    submitevent1() {
      this.isAddStore = false;
      this.getStore();
    },
    updateEvent1() {
      this.isupdateStore = false;
      this.getStore();
    },
    //  增加门店
    AddStore() {
      this.isAddStore = true;
    },
    update(row) {
      this.storeRow = JSON.parse(JSON.stringify(row));
      this.isupdateStore = true;
    },
    handleConfirmDelete(scope) {
      this.$service.deleteStore(scope.storeId).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getStore();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    indexMethod(index) {
      var index1 = index + 1;
      return index1++;
    }
  },
  watch: {}
};
</script>
<style scoped>
</style>